<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>轮播列表</title>
<#include "/WEB-INF/views/template/bootMainCss.ftl" parse=true encoding="utf-8">
    <!-- bootstrap-datetimepicker -->
    <link href="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/good.lzy.css" rel="stylesheet">
    <style>
        input[type="number"]{-moz-appearance:inherit; border: 1px solid #ccc;}
    </style>
</head>
<body>

<div class="panel panel-lzy">
    <div class="panel-body">
        <h5 class="tips-lzy">操作提示</h5>
        <ul class="tips-list-lzy">
            <li><span>◆&nbsp;<span>该页面展示了小程序主页轮播数据。</span></span></li>
            <li><span>◆&nbsp;<span>轮播活动至少一个，最多可新增轮播活动4个。</span></span></li>
            <li><span>◆&nbsp;<span>请慎重操作，任何编辑和删除都将影响小程序首页轮播展示，无特殊情况下请勿操作！</span></span></li>
        </ul>
    </div>
</div>

<div class="panel panel-f5">
    <div class="panel-body row item-right">
        <form id="myForm" class="form-inline form-margin-right">
            <div class="form-group">
                <span>轮播板块：</span>
                <select class="form-control required" id="category">
                    <option value="" >选择板块</option>
                <#list typeList as type>
                <#--<c:forEach items="${typeList}" var="type">-->
                    <option value="${type.code!}" >${type.desc!}</option>
                <#--</c:forEach>-->
                </#list>
                </select>
            </div>

            <div class="form-group">
                <span>搜索：</span>
                <input type="text" placeholder="轮播名称/链接地址" class="form-control" id="key">
                <input type="hidden" id="status" value="0"/>
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-primary btn-sm" onclick="search(1)">查询</button>
                <button type="button" class="btn btn-primary btn-sm" onclick="$('#myForm')[0].reset();">重置</button>
            </div>
        </form>
    </div>

    <div class="panel-heading row item-left">
        <button type="button" class="btn btn-primary" onclick="addCarousel();"><span class="fa fa-plus"></span> 新增</button> （点击新增轮播数据）
    </div>
    <!-- 分页查询的地址-->
    <div class="panel-body panel-white item-box">
        <div class="table-responsive">
            <table id="myTable"
                   class="table table-hover tree table-bordered table-striped table-condensed"
                   data-url="${basePath}/appletCarousel/json"
                   data-pageSize="10,50,100" data-method="GET">
                <thead>
                <!-- 需要循环的字段  对应mapper文件-->
                <tr>
                    <th  data-type="checkbox" data-field="id"></th>
                    <th  data-type="xuhao" >序号</th>
                    <th  data-field="typeName" >类型</th>
                    <th  data-field="name" >图片名称</th>
                    <th  data-field="sourceTypeName">链接板块</th>
                <#--<th  data-field="categoryName">图片预览</th>-->
                    <th  data-field="url" data-call="true">轮播图片</th>
                    <th  data-field="path">轮播链接地址</th>
                    <th  data-field="sort" width="5%" data-call="true">排序</th>
                    <th  data-field="button" data-call="true">操作</th>
                </tr>
                </thead>
                <tbody id="tbodyId">

                </tbody>
            </table>
        </div>
        <!-- 分页条-->
        <div class="row">
            <div align="left" class="col-xs-6">
                <div class="input-group">
                    <span class="input-group-addon" id="pageCount"></span> <select
                        id="pageSize" onchange="search(1)" class="form-control"
                        style="width: 100px"></select>
                </div>
            </div>
            <div align="right" class="col-xs-6">
                <ul class="pagination" id="pagination"></ul>
            </div>
        </div>
    </div>

</div>
<#include "/WEB-INF/views/template/bootMainJs.ftl" parse=true encoding="utf-8">
<script type="text/javascript" src="${basePath}/bootstrap/js/utils.js" type="text/javascript"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/jqPaginator.js"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/myPage.js"></script>
<!-- bootstrap-datetimepicker -->
<script type="text/javascript" src="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    //循环列表数据以及操作按钮
    function tableCallBack(data, id) {
        if (id == 'url') {
            if (data[id] != '' && data[id] != null) {
                return '<img width="50" height="50" src=' + data.url + ' />';
            } else {
                return '<img width="50" height="50" src="${basePath}/images/no_image.png" />';
            }
        }else  if(id == 'sort'){
            return '<input type="number" class="limit-length" min="1" max="99" style="width:50px;" onchange="gateSort(' + data.id + ');" onfocus="focusSort(' + data.id + ');" id="sort_'+ data.id + '" value='+data.sort+' />';
        } else if(id == 'path'){
            return '<a href="'+ data.path + '">'+ data.path + '</a>';
        }
        else if (id == 'button') {//增加操作按钮
            var _button = '';
            var count = 0;
            _button += '<button type="button" class="btn btn-white btn-xs" onclick="editCha(\'' + data.id + '\');">编辑</button> ';
            _button += '<button type="button" class="btn btn-white btn-xs" onclick="deleteCha(\'' + data.id + '\');">移除</button> ';
            count++
            return _button;
        } else {
            if (data[id] == null || data[id] == '') {
                return '';
            } else {
                return data[id];
            }
        }
    }
    //限制排序输入数据长度
    $('#tbodyId').on('input','.limit-length',function () {
        var $val = $(this).val();
        if($val.length>2){
            $(this).val($val.substring(0,2));
        }
    });
    //新增
    function addCarousel(){
        layer.open({
            type: 2,
            area: ['70%', '90%'],
//         offset: [100,(($(window).width()-900)/2)],
            title: ['新增轮播','text-align:center;'],
            content: ['${basePath}/appletCarousel/create','yes'],
            end:function(){
                window.location.reload();
            }
        });
    }

    <#--<%--//详情--%>-->
    <#--<%--function check(id){--%>-->
    <#--<%--window.parent.location.href = "${basePath}/appletCarousel/detail/" + id;--%>-->
    <#--<%--}--%>-->
    //编辑
    function editCha(id){
        layer.open({
            type: 2,
            area: ['70%', '90%'],
//         offset: [100,(($(window).width()-900)/2)],
            title: ['编辑轮播','text-align:center;'],
            content: ['${basePath}/appletCarousel/edit?id=' + id,'yes'],
            end:function(){
                window.location.reload();
            }
        });
    }

    //移除
    function deleteCha(id){
        layer.confirm('是否确定此操作？', {
            btn: ['确定','取消'] //按钮
        }, function() {
            $.ajax({
                type: 'DELETE',
                url: '${basePath}/appletCarousel/delete/' + id,
                dataType: 'json',
                success: function (data) {
                    if (data.code == '0') {
                        layer.alert('移除成功!', {
                            icon: 6
                        }, function(index){
                            layer.closeAll('dialog');
                            search(parseInt($('.active').attr('jp-data')));
                        });
                    } else {
                        layer.alert(data.desc, {
                            icon: 56
                        });
                    }
                }
            });
        });
    }

    function gateSort(id){
        var oldId=$("#sort_"+id).val();
        $("#sort_"+id).on('mouseout',function(){
            updateSort(oldId,id);
        });
    }
    function focusSort(id){
        var oldId=$("#sort_"+id).val();
        $("#sort_"+id).on('blur',function(){
            updateSort(oldId,id);
        });
    }

    //更改排序
    function updateSort(oldId,id){
        var sort=$("#sort_"+id).val();
        if(sort<1){
            $("#sort_"+id).val(oldId);
            layer.alert('排序必须大于0!', {
                icon: 6
            });
        }else  if(sort!=oldId){
            $.ajax({
                type: 'POST',
                url: '${basePath}/appletCarousel/updateSort',
                dataType: 'json',
                data: {
                    id: id,
                    sort:sort
                },
                success: function (data) {
                    if (data.code == '0') {
                        layer.alert('排序修改成功!', {
                            icon: 6
                        }, function(index){
                            layer.closeAll('dialog');
                            window.location.reload();
                        });
                    }
                }
            });
        }
    }
</script>
</body>
</html>